<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>from</title>
	<link rel="stylesheet" href="./layui/css/layui.css">
	<script type="text/javascript" src="./layui/layui.js"></script>
</head>
<body>
	<form class="layui-form" action="">
		用户名： <input type="text" name="title" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
		性别：<input type="radio" name="sex" value="男" title="男">
      	<input type="radio" name="sex" value="女" title="女"><br>
		城市： 
		<div class="layui-input-block">
      	<select name="city" lay-verify="required">
        	<option value=""></option>
        	<option value="0">北京</option>
        	<option value="1">上海</option>
        	<option value="2">广州</option>
        	<option value="3">深圳</option>
        	<option value="4">杭州</option>
      	</select>
      	</div>
      	<input type="checkbox" name="like[write]" title="写作" checked>
      	<!-- title 值显示出来你的文字  checked 为默认显示-->
      	<input type="checkbox" name="like[read]" title="阅读" >
     	<input type="checkbox" name="like[dai]" title="发呆"><br>
     	开关：<input type="checkbox" name="switch" lay-skin="switch">
     	<!-- lay-skin="switch 开关特有属性 -->

     	<div class="layui-form-item layui-form-text">
		    <label class="layui-form-label">文本域</label>
		    <div class="layui-input-block">
		     <textarea name="desc" placeholder="请输入内容" class="layui-textarea"></textarea>
		    </div>
		</div>
		<div class="layui-form-item" >
		    <div class="layui-input-block">
		      <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
		      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
		    </div>
		</div>
		<div id="box" >
			
		</div>

		<!-- 进度条 -->
		<div class="layui-progress" lay-showPercent="yes">
  			<div class="layui-progress-bar layui-bg-red layui-progress-big" lay-percent="60%"></div>
		</div>

		<input id="start" class="layui-input" placeholder="开启节日" onclick="layui.laydate({elem: this, festival: true})" style="float:left">
		<input id="end" class="layui-input" placeholder="只能选昨天到明天" onclick="layui.laydate({elem: this, min: laydate.now(-1), max: laydate.now(+1)})" style="float:left">
		
		<input name="file" class="layui-upload-file" type="file">
	</form>	
	<script type="text/javascript">

		//要用那个模块要先声明模块
		layui.use(['form','layedit','element','laydate','upload'], function(){
			var form = layui.form();
			var layedit = layui.layedit;  //
		  	var $ = layui.jquery;  //引入JQ

		layedit.build('box', {
 		 height: 180 //设置编辑器高度
		});
		var element = layui.element(); //进度条

		var laydate = layui.laydate;  //声明日期
		var start = {
		    min: laydate.now()
		    ,max: '2099-06-16 23:59:59'
		    ,istoday: false
		    ,choose: function(datas){
		      end.min = datas; //开始日选好后，重置结束日的最小日期
		      end.start = datas //将结束日的初始值设定为开始日
		    }
		  };
		  
		var end = {
		    min: laydate.now()
		    ,max: '2099-06-16 23:59:59'
		    ,istoday: false
		    ,choose: function(datas){
		      start.max = datas; //结束日选好后，重置开始日的最大日期
		    }
		  };
		   document.getElementById('start').onclick = function(){
			    start.elem = this;
			    laydate(start);
			  }
			 //通过id start 抓到上面的id,从而作用到样式
			  document.getElementById('end').onclick = function(){
			    end.elem = this
			    laydate(end);
			  }

		layui.upload({
		    url: '' //上传接口
		    ,success: function(res){ //上传成功后的回调
		      console.log(res)
		    }	  


		});
	</script>
</body>
</html>